<template>
    <div>
        <NavTop />
        <div class="common">
            <div class="cont">
                <div class="common-layout">
                    <el-container>
                        <el-aside width="700px">
                            <div class="demo-image__preview" style="margin-left: 220px;margin-top: 150px;">
                                <el-image
                                    style="width: 450px; height: 450px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); border-radius: 10px;"
                                    :src="list.bigImg"
                                    :zoom-rate="1.2"
                                    :max-scale="7"
                                    :min-scale="0.2"
                                    :preview-src-list="list.moreImg"
                                    :initial-index="4"
                                    fit="cover"
                                />
                            </div>
                        </el-aside>
                        <el-main style="margin-right: 250px;">
                            <el-row>
                                <el-col :span="24">
                                    <h1 class="product-title">{{ list.name }}</h1>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <p class="product-desc">商品详情：{{ list.dis }}</p><br>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6">
                                    <h4 class="original-price">原价：￥{{ list.price }}</h4><br>
                                </el-col>
                                <el-col :span="18">
                                    <h4 class="discounted-price">优惠价：￥{{ list.onlineprice }}</h4><br>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="4">数量：
                                    <el-button plain @click="decreaseNum()" class="quantity-btn">-</el-button>
                                </el-col>
                                <el-col :span="4">
                                    <span class="quantity">{{ num }}</span>
                                </el-col>
                                <el-col :span="16">
                                    <el-button plain @click="increaseNum()" class="quantity-btn">+</el-button>
                                </el-col>
                            </el-row><br>
                            <el-row>
                                <el-col :span="8">
                                    <el-button type="warning" plain @click="addCart()" class="cart-btn">加入购物车</el-button>
                                </el-col>
                                <el-col :span="16">
                                    <el-button type="warning" plain @click="addOrder()" class="buy-btn">购买</el-button>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <h3>用户评价</h3>
                                    <el-collapse>
                                        <el-collapse-item title="好评">
                                            <p>商品味道非常好，口感绵密，性价比超高，超级好吃~</p>
                                        </el-collapse-item>
                                        <el-collapse-item title="中评">
                                            <p>配送速度有点慢，不过味道很美味！</p>
                                        </el-collapse-item>
                                        <el-collapse-item title="差评">
                                            <p>不太符合预期，有点太甜了，希望出一个微甜版本~</p>
                                        </el-collapse-item>
                                    </el-collapse>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <h3>招牌甜品推荐~</h3>
                                    <div class="related-products">
                                        <div v-for="(related, index) in relatedGoods" :key="index" class="related-product">
                                            <el-image
                                                :src="related.bigImg"
                                                style="width: 150px; height: 150px; margin-right: 10px;"
                                                fit="cover"
                                            />
                                            <p>{{ related.name }}</p>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-main>
                    </el-container>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import NavTop from '@/components/NavTop.vue';
import { useGoodsStore } from '@/store/goods';
import { ElMessage, ElMessageBox } from 'element-plus';
// import axios from 'axios';
export default {
    components: {
        NavTop
    },
    mounted() {
        // axios.get('goodslist.json').then(res=>{
        //     this.list1=res.data.goodslist
        //     this.filterlist=this.list1.filter(v=>v.tu==true)
        //     console.log(this.filterlist);
        // }),
        this.list = this.$route.query;
        this.relatedGoods = [
            {
                bigImg: require('../../assets/a.jpg'),
                name: '提拉米苏'
            },
            {
                bigImg: require('../../assets/b.jpg'),
                name: '舒芙蕾'
            }
        ];
    },
    data() {
        return {
            list: [],
            store: useGoodsStore(),
            time: new Date(),
            num: 1,
            relatedGoods: [],
            list1:[],
            filterlist:[]
        }
    },
    methods: {
        decreaseNum() {
            if (this.num === 1) {
                ElMessage({
                    message: '小主不能再减了~',
                    type: 'warning'
                });
            } else {
                this.num--;
            }
        },
        increaseNum() {
            this.num++;
        },
        addCart() {
            // 加入购物车逻辑，调用store中的方法
            this.store.cartAdd({
                id: this.list.id,
                name: this.list.name,
                price: this.list.price,
                onlineprice: this.list.onlineprice,
                num: this.num,
                total: this.list.onlineprice * this.num
            });
            ElMessageBox.alert('小主，商品已加入，感谢选购！', '亲亲', {
                confirmButtonText: '知道了',
            });
        },
        addOrder() {
            // 生成订单逻辑，生成订单号并添加商品信息到订单数组
            let orderID = this.time.getFullYear().toString() + (this.time.getMonth() + 1).toString() + this.time.getDate().toString() +
                Math.random().toString().slice(2, 10);
            this.store.orderAdd({
                orderID: orderID,
                time: new Date(),
                num: this.num,
                sum: this.list.onlineprice * this.num,
                isOrdered: false,
                child: [this.list]
            });
            ElMessageBox.alert('小主，购买订单已生成~请前往订单页面完成支付！', '亲亲', {
                confirmButtonText: '知道了',
            });
        }
    }
}
</script>
<style scoped>
.cont {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.common {
    background: url('../../assets/2.jpg');
    height: 100%;
    width: 100%;
    display: flex;
    background-size: cover;
    position: absolute;
    left: 0;
}

.product-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

.product-desc {
    font-size: 16px;
    color: #666;
}

.original-price {
    font-size: 18px;
    color: #999;
    text-decoration: line-through;
}

.discounted-price {
    font-size: 20px;
    color: #f60;
}

.quantity-btn {
    padding: 5px 10px;
    border: 1px solid #ccc;
    background-color: #fff;
}

.quantity {
    padding: 5px 10px;
    border: 1px solid #ccc;
    display: inline-block;
    width: 30px;
    text-align: center;
}

.cart-btn {
    padding: 10px 20px;
    border: 1px solid #f60;
    background-color: #fff;
    color: #f60;
}

.buy-btn {
    padding: 10px 20px;
    border: 1px solid #f60;
    background-color: #f60;
    color: #fff;
}

.related-products {
    display: flex;
}

.related-product {
    text-align: center;
}
</style>
